import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '@/views/login'
import order from '@/views/order'
import search from '@/views/search'
import list from '@/views/goods/list'
import detail from '@/views/goods/detail'
import notFound from '@/views/system/notFound'
// import home from '@/views/layout/home'
import category from '@/views/layout/category'
import cart from '@/views/layout/cart'
import my from '@/views/layout/my'
import store from '@/store'
import addressList from '@/views/address/addressList'
import addressEdit from '@/views/address/addressEdit'
import addressAdd from '@/views/address/addressAdd'

// 异步引入组件
// import pay from '@/views/pay'
const pay = () => import('@/views/pay')

Vue.use(VueRouter)

const router = new VueRouter({
  routes:
    [
      {
        path: '/',
        // component: layout,
        component: () => import('@/views/layout'),
        redirect: '/home',
        children: [
          {
            path: '/home',
            component: () => import('@/views/layout/home')
          },
          {
            path: '/category',
            component: category
          },
          {
            path: '/cart',
            component: cart
          },
          {
            path: '/my',
            component: my
          }
        ]
      },
      {
        name: 'login',
        path: '/login',
        component: login
      },
      {
        path: '/order',
        component: order
      },
      {
        path: '/pay',
        component: pay
      },
      {
        path: '/search',
        component: search
      },
      {
        path: '/goodsList',
        component: list
      },
      {
        path: '/detail/:id',
        component: detail
      },
      {
        path: '/address/list',
        component: addressList
      },
      {
        path: '/address/add',
        component: addressAdd
      },
      {
        path: '/address/edit',
        component: addressEdit
      },
      //  404
      {
        path: '*',
        component: notFound
      }
    ]
})

// router.beforeEach((to, from, next) => {
// //  to 要跳转到哪个组件
// //  from 从哪个组件来
// //  next 将本次路由跳转到哪个组件【不指定参数时，为放行本次跳转；指定组件路径时，则拦截到指定的组件】
// //  next()：放行； next('/login')：拦截到登录页
//   console.log(123)
//   next()
// })
const authUrl = ['/order', '/pay', '/cart', '/my']
router.beforeEach((to, from, next) => {
//  to 要跳转到哪个组件
//  from 从哪个组件来
//  next 将本次路由跳转到哪个组件【不指定参数时，为放行本次跳转；指定组件路径时，则拦截到指定的组件】
//  next()：放行； next('/login')：拦截到登录页。 也可以使用编程式导航跳转到指定页面 $router.push('/login')
  console.log(`to = ${JSON.stringify(to.path)}`)
  store.commit('systemConfig/switchShowXfq', to.path)
  if (!authUrl.includes(to.path)) {
    console.log(`无需权限页面，直接放行，path = ${to.path}`)
    next()
    return
  }

  const token = store.getters.token
  console.log(`路由守卫 token = ${token}`)
  if (!token) {
    // next('/login')
    router.replace({
      path: '/login',
      query: { redirectUrl: location.href }
    })
  } else {
    next()
  }
})

export default router
